<template>
  <div class="account">
    <van-nav-bar
      title="银行账户"
      left-arrow
      @click-left="onClickLeft"
      right-text="新增"
      @click-right="onClickRight"
    />
    <div
      style="padding: 16px; border-radius: 20px"
      v-for="(item, index) in bankList"
      :key="index"
    >
      <van-bank-card
        v-if="isHit(item.bankName)"
        :name="getBankName(item.bankName)"
        type="DC"
        :number="item.accountNumber"
      />
      <div
        v-if="!isHit(item.bankName)"
        style="
          box-sizing: border-box;
          width: 92%;
          margin: auto;
          border-radius: 3%;
          max-width: 100%;
          padding: 9% 13% 20% 21%;
          background-repeat: no-repeat;
          background: linear-gradient(#77d6dd, #59a4ad);
          background-size: 100%;
          color: #fff;
        "
      >
        <div style="font-size: 18px; line-height: 25px">
          {{ item.bankName }}
        </div>
        <div style="font-size: 12px; line-height: 17px">储蓄卡</div>
        <div
          style="
            margin-top: 10%;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            font-size: 20px;
          "
        >
          <span
            style="
              opacity: 0.5;
              font-family: Helvetica;
              font-size: 15px;
              letter-spacing: 0.87px;
            "
            >****</span
          >
          <span
            style="
              opacity: 0.5;
              font-family: Helvetica;
              font-size: 15px;
              letter-spacing: 0.87px;
            "
            >****</span
          >
          <span
            style="
              opacity: 0.5;
              font-family: Helvetica;
              font-size: 15px;
              letter-spacing: 0.87px;
            "
            >****</span
          >
          <span>{{ item.accountNumber.slice(-3) }}</span>
        </div>
      </div>
      <van-cell-group
        class="account-info"
        style="
          margin-top: -60px;
          padding: 16px 5px;
          box-shadow: 0px -5px 10px rgba(175, 175, 175, 0.5);
          /*考虑浏览器兼容性*/
          -moz-box-shadow: 0px -5px 10px rgba(175, 175, 175, 0.5);
          -webkit-box-shadow: 0px -5px 10px rgba(175, 175, 175, 0.5);
        "
      >
        <van-cell :title="item.accountName" value="" />
        <van-cell
          title="账户类型"
          :value="item.accountType * 1 === '1' ? '企业' : '个人'"
        />
        <van-cell title="联系方式" :value="item.contactPhone" />
        <van-cell title="证件号码" :value="item.certificateNumber" />
        <van-cell title="地区" :value="item.areaName" />
        <van-cell title="分支行名称" :value="item.bankBranchName" />
        <!-- <div style="float:right;display: block;background-color: #fff;">

                </div> -->
        <van-row>
          <van-col span="24">
            <div style="float: right; margin: 16px 14px 0 0">
              <van-button
                size="small"
                type="info"
                style="margin-right: 5px"
                @click="toEditBank(item)"
                >编辑</van-button
              >
              <van-button size="small" @click="delBank(item)">删除</van-button>
            </div>
          </van-col>
        </van-row>
      </van-cell-group>
      <van-dialog
        v-model="showDel"
        title="确认删除?"
        @confirm="delConfirm"
        show-cancel-button
      >
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { BankNameList } from "@/utils/options";
import { getValue } from "@/utils/func";
import "vant-green/lib/index.css";
export default {
  computed: {
    getBankName() {
      return function (bankName) {
        const value = getValue(BankNameList, bankName);
        return value ? value : bankName;
      };
    },
    isHit() {
      return function (bankName) {
        const value = getValue(BankNameList, bankName);
        return !!value;
      };
    },
  },
  data() {
    return {
      bankList: [],
      showDel: false,
      index: 0,
      row: {},
    };
  },
  methods: {
    delBank(item) {
      this.row = item;
      this.showDel = true;
    },
    delConfirm() {
      this.$post("/bank/account/remove", {
        bankAccountId: this.row.bankAccountId,
      }).then(() => {
        this.$toast({
          message: "删除成功",
          duration: 800,
        });
        this.showDel = false;
        this.getBankList();
      });
    },
    onClickLeft() {
      this.$router.push("/personCenter");
    },
    toEditBank(item) {
      localStorage.setItem("bank", JSON.stringify(item));
      this.$router.push("/addBankAccount");
    },
    onClickRight() {
      localStorage.removeItem("bank");
      this.$router.push("/addBankAccount");
    },
    getBankList() {
      this.$get("/bank/account/list").then((res) => {
        // 处理你的数据
        this.bankList = res.data;
      });
    },
  },
  mounted() {
    this.getBankList();
  },
};
</script>
<style scoped>
.account {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
  font-size: 1rem;
}

.my-content {
  padding-top: 2em;
  padding-left: 1rem;
  /* background-color: #fff; */
  border-bottom: 1px solid #e9e9e9;
  background-image: linear-gradient(#b95478, #eb8989);
  /* background-color: #0283ef; */
}

.my-title {
  float: left;
  margin-left: 0.8rem;
}

.name {
  font-size: 0.6rem;
  margin-top: 0.6em;
  color: #fff;
}

.tel {
  line-height: 100%;
  text-align: center;
  margin-top: 50%;
}

.account-label {
  float: left;
}

.account-value {
  float: right;
}

.account-title {
  background-color: #fff;
  padding: 0.5rem 0.45rem;
  border-bottom: 1px #dddddd solid;
}

.account-title-icon {
  margin-right: 0.2rem;
}

.van-cell:not(:last-child)::after {
  border: none;
}

.van-cell {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
</style>
